<!--
 * @Author: your name
 * @Date: 2021-09-20 10:46:31
 * @LastEditTime: 2021-12-03 13:52:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\system\account\index.vue
-->
<template>
    <Row :gutter="[10, 10]">
        <Col :xs="{ span: '24' }" :lg="{ span: '24' }">
            <Card>
                <Row :gutter="[10, 10]" justify="space-between">
                    <Col :xs="{ span: '24' }" :lg="{ span: '8' }">
                        <Row :gutter="[10, 10]">
                            <Col :xs="{ span: '16' }" :lg="{ span: '16' }">
                                <AInput placeholder="请输入内容" default-value="" />
                            </Col>
                            <Col :xs="{ span: '8' }" :lg="{ span: '8' }">
                                <ASelect
                                    label-in-value
                                    :default-value="{ key: selectvalue }"
                                    @change="handleSelect"
                                >
                                    <ASelectOption value="启用"> 启用 (100) </ASelectOption>
                                    <ASelectOption value="禁用"> 禁用 (101) </ASelectOption>
                                </ASelect>
                            </Col>
                        </Row>
                    </Col>
                    <Col :xs="{ span: '24' }" :lg="{ span: '6' }">
                        <Row :gutter="[10, 10]">
                            <Col :xs="{ span: '24' }" :lg="{ span: '6' }">
                                <Button size="small" class="btns" type="primary">搜索</Button>
                            </Col>
                            <Col :xs="{ span: '12' }" :lg="{ span: '6' }">
                                <Button size="small" class="btns" type="primary">重置</Button>
                            </Col>
                            <Col :xs="{ span: '12' }" :lg="{ span: '6' }">
                                <Button size="small" class="btns" type="primary">刷新</Button>
                            </Col>
                            <Col :xs="{ span: '12' }" :lg="{ span: '6' }">
                                <Button size="small" class="btns" type="primary">刷新</Button>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Card>
        </Col>
        <Col :xs="{ span: '24' }" :lg="{ span: '24' }">
            <div class="tables">
                <Table
                    :data-source="datas"
                    :columns="columns"
                    :row-key="(record) => record.name"
                >
                    <template #delivery="{ record }">
                        <Switch
                            v-bind="getBindValue"
                            :checked="record.delivery"
                            class="switch"
                            @change="handleChange($event, record)"
                        />
                    </template>
                    <template #time="{ record }">
                        <Tag color="pink">{{ record.time }}</Tag>
                    </template>
                    <template #other="{ record }">
                        <!-- 删除 -->
                        <div class="btncell">
                            <Button
                                class="mrbtn"
                                type="danger"
                                shape="circle"
                                @click.stop="handleClick(record)"
                            >
                                <svg-icon icon-class="clear" size="1"></svg-icon>
                            </Button>
                            <!-- 编辑 -->
                            <Button
                                class="mrbtn"
                                type="primary"
                                shape="circle"
                                @click.stop="handleClick(record)"
                            >
                                <svg-icon icon-class="editorinfo" size="1"></svg-icon>
                            </Button>
                            <!-- 封停 -->
                            <Button
                                class="mrbtn"
                                type="primary"
                                shape="circle"
                                @click.stop="handleClick(record)"
                            >
                                <svg-icon icon-class="jinzhi" size="1"></svg-icon>
                            </Button>
                        </div>
                    </template>
                </Table>
            </div>
        </Col>
        <Drawer
            title="修改信息"
            placement="right"
            :closable="false"
            :visible="visible"
            width="50%"
            @close="onClose"
        >
            <FromTable :infos="infos" @handleCall="handleCall"></FromTable>
        </Drawer>
    </Row>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import {
    Row,
    Col,
    Card,
    Button,
    Table,
    Switch,
    Tag,
    Drawer,
} from 'ant-design-vue'
import FromTable from './component/formModel.vue'

interface Rulefrom {
  name: String;
  id?: any;
  delivery: Boolean;
  type: any;
  email: String;
  time?: any;
}
export default defineComponent({
    name: 'Account',
    components: {
        Row,
        Col,
        Card,
        Table,
        Button,
        Switch,
        Tag,
        Drawer,
        FromTable,
    },
    setup() {
    // 显示弹窗
        let visible = ref()
        let infos = ref<Rulefrom>()
        visible.value = false
        // 数据
        let datas = ref<Rulefrom[]>()
        datas.value = [
            {
                name: 'user1',
                email: 'asd123',
                type: 2,
                delivery: false,
                time: '2021/9/20',
                id: '001',
            },
            {
                name: 'user1a',
                email: 'asd123aa',
                type: 1,
                delivery: true,
                time: '2021/9/20',
                id: '002',
            },
        ]
        //
        // 标题
        let columns = [
            {
                title: 'name',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: 'email',
                dataIndex: 'email',
                key: 'email',
            },
            {
                title: '权限',
                key: 'type',
                dataIndex: 'type',
                scopedSlots: { customRender: 'type' },
            },
            {
                title: '状态',
                key: 'delivery',
                dataIndex: 'delivery',
                slots: { customRender: 'delivery' },
            },
            {
                title: '创建时间',
                key: 'time',
                dataIndex: 'time',
                slots: { customRender: 'time' },
            },
            {
                title: '操作',
                key: 'other',
                dataIndex: 'other',
                slots: { customRender: 'other' },
            },
        ]

        // 头部条件选择
        const selectvalue = ref()
        selectvalue.value = '启用'
        const handleSelect = (e) => {
            console.log(e)
        }
        // 编辑删除...
        const handleClick = (e) => {
            // 开启弹窗
            visible.value = true
            infos.value = e
        }
        // Switch 数值绑定
        const getBindValue = computed(() => ({
            disabled: false,
            checkedChildren: '已启用',
            unCheckedChildren: '已禁用',
        }))
        //   更改状态
        const handleChange = (e, el) => {
            let items = datas.value.filter((item) => el.id == item.id)
            // filter会改变源地址 ，直接更改即可
            items[0].delivery = e
        }

        // 关闭弹窗
        const onClose = () => {
            visible.value = false
        }
        // 更改之后参数
        const handleCall = (e) => {
            let { id } = infos.value
            //  通过给出id调用接口更改新参数
            console.log(id, e)
        }
        return {
            handleChange,
            getBindValue,
            handleClick,
            selectvalue,
            handleSelect,
            handleCall,
            columns,
            datas,
            visible,
            onClose,
            infos,
        }
    },
})
</script>

<style lang="less" scoped>
.btns {
  width: 100%;
}
.mrbtn {
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btncell {
  display: flex;
}
.tables {
  width: 100%;
  overflow-x: scroll;
//   background: #fff;
  padding: 5px;
}
.switch {
  white-space: nowrap;
}
</style>
